import React from "react";
import { Button, Space, Typography } from "antd";
import "./style.less";

const { Text } = Typography;

export interface ActionFooterProps {
  /**
   * 确认按钮的回调函数
   */
  onConfirm?: () => void;
  /**
   * 取消按钮的回调函数
   */
  onCancel?: () => void;
  /**
   * 是否显示选择项数量
   */
  showCount?: boolean;
  /**
   * 选中项的数量
   */
  count?: number;
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  /**
   * 自定义类名
   */
  className?: string;
  /**
   * 自定义确认按钮文本
   */
  confirmText?: React.ReactNode;
  /**
   * 自定义取消按钮文本
   */
  cancelText?: React.ReactNode;
  /**
   * 确认按钮是否禁用
   */
  confirmDisabled?: boolean;
  /**
   * 自定义渲染底部内容
   */
  renderContent?: () => React.ReactNode;
  /**
   * 底部内容对齐方式
   */
  align?: "left" | "center" | "right" | "space-between";
}

/**
 * 通用操作底部组件
 *
 * 用于搜索结果、表单、对话框等组件的底部操作区域
 */
const ActionFooter: React.FC<ActionFooterProps> = ({
  onConfirm,
  onCancel,
  showCount = false,
  count = 0,
  style,
  className = "",
  confirmText = "确定",
  cancelText = "取消",
  confirmDisabled = false,
  renderContent,
  align = "space-between",
}) => {
  return (
    <div
      className={`action-footer ${className}`}
      style={{
        padding: "12px 12px",
        borderTop: "1px solid #f0f0f0",
        backgroundColor: "#FAFAFF",
        display: "flex",
        justifyContent: align,
        alignItems: "center",
        flexDirection: "row-reverse",
        ...style,
      }}
    >
      {renderContent ? (
        renderContent()
      ) : (
        <>
          <Space>
            {onCancel && <Button onClick={onCancel}>{cancelText}</Button>}
            {onConfirm && (
              <Button
                type="primary"
                onClick={onConfirm}
                disabled={confirmDisabled}
              >
                {showCount && count > 0
                  ? `${confirmText} (${count})`
                  : confirmText}
              </Button>
            )}
          </Space>
          {showCount && <Text type="secondary">已选 {count} 项</Text>}
        </>
      )}
    </div>
  );
};

export default ActionFooter;
